<script setup lang="ts">
import { ref } from "vue";

interface ComponentItem {
  id: number;
  name: string;
  type: string;
  icon: string;
}

const components = ref<ComponentItem[]>([
  { id: 1, name: "基础表格", type: "table", icon: "mdi-table" },
  { id: 2, name: "输入框", type: "input", icon: "mdi-text-box" },
  { id: 3, name: "按钮", type: "button", icon: "mdi-button" },
]);

const { $bus } = useNuxtApp();
const onDragStart = (event: DragEvent, component: ComponentItem) => {
  $bus.emit("component-selected", component as unknown as Record<string, unknown>);
};

const router = useRouter()
</script>

<template>
  <div class="component-panel">
    <div class="ios-navbar mb-8">
      <IOSBackButton @click="router.back()" />
    </div>
    <h3 class="text-lg font-semibold mb-4">组件列表</h3>
    <ul class="space-y-2">
      <li
        v-for="component in components"
        :key="component.id"
        class="p-2 border rounded cursor-move hover:bg-gray-100"
        draggable="true"
        @dragstart="onDragStart($event, component)"
      >
        <div class="flex items-center">
          <span class="mr-2">{{ component.icon }}</span>
          {{ component.name }}
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.component-panel {
  /* @apply p-4 border-r w-64 h-full bg-white; */
  padding: 1rem;
  border-right: 1px solid #ccc;
  width: 20rem;
  height: 100%;
  background-color: #fff;
}
</style>
